.ruler-tool {
  width: 100%;
  height: 100%;
  &-wrapper {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    overflow: hidden;
    user-select: none;
    background-color: var(--hv-ruler-tool-bg);
  }
  &-h,
  &-v,
  &-ref-line-v,
  &-ref-line-h,
  &-ref-dot-h,
  &-ref-dot-v {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 999;
  }
  &-h,
  &-v,
  &-ref-line-v,
  &-ref-line-h,
  &-ref-dot-h,
  &-ref-dot-v {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 999;
  }

  &-visible {
    position: relative;
    z-index: 998;
    left: 0;
    top: 0;
    width: 1.55em;
    height: 18px;
    line-height: 18px;
    font-size: 13px;
    color: var(--hv-rule-tool-cale-color);
    cursor: pointer;
    border-top: 1px solid #070707;
    border-left: 1px solid #070707;
    display: flex;
    background-color: var(--hv-ruler-tool-bg);
    :hover {
      opacity: 0.8;
    }

    :deep(.anticon) {
      margin-left: 1px;
      margin-top: 1px;
    }
  }

  &-h {
    width: 100%;
    height: 18px;
    left: 1.22em;
    opacity: 1;
    background: url()
      repeat-x; /*./image/ruler_h.png*/
    background-color: var(--hv-ruler-tool-bg);
  }

  &-v {
    width: 18px;
    height: 100%;
    top: 1.25em;
    opacity: 1;
    background: url()
      repeat-y; /*./image/ruler_v.png*/
    background-color: var(--hv-ruler-tool-bg);
  }

  &-v .n {
    position: absolute;
    margin-top: 1px;
    font: 10px/1 Arial, sans-serif;
    color: var(--hv-rule-tool-cale-color);
    cursor: default;
  }
  &-h .n {
    position: absolute;
    margin-left: 1px;
    font: 10px/1 Arial, sans-serif;
    color: var(--hv-rule-tool-cale-color);
    cursor: default;
  }

  &-v .n {
    width: 8px;
    left: 3px;
    word-wrap: break-word;
  }

  &-h .n {
    top: 1px;
  }

  &-ref-line-v,
  &-ref-line-h,
  &-ref-dot-h,
  &-ref-dot-v {
    z-index: 998;
  }

  &-ref-line-h {
    width: 100%;
    height: 3px;
    background: url()
      repeat-x left center; /*./image/line_h.png*/
    cursor: n-resize; /*url(./image/cur_move_h.cur), move*/
  }

  &-ref-line-v {
    width: 3px;
    height: 100%;
    _height: 9999px;
    background: url()
      repeat-y center top; /*./image/line_v.png*/
    cursor: w-resize; /*url(./image/cur_move_v.cur), move*/
  }

  &-ref-dot-h {
    width: 100%;
    height: 3px;
    background: url()
      repeat-x left 1px; /*./image/line_dot.png*/
    cursor: n-resize; /*url(./image/cur_move_h.cur), move*/
    top: -10px;
  }

  &-ref-dot-v {
    width: 3px;
    height: 100%;
    _height: 9999px;
    background: url()
      repeat-y 1px top; /*./image/line_dot.png*/
    cursor: w-resize; /*url(./image/cur_move_v.cur), move*/
    left: -10px;
  }
  &-content {
    position: absolute;
    z-index: 997;
    width: 100%;
    height: 100%;
  }
  &-content-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 998;
  }
}
